import TodoList from './TodoList'
const TodoMain = ({ list, type }) => {
  const newList = list.filter((item) => {
    if (type === 'active') {
      return !item.done
    } else if (type === 'completed') {
      return item.done
    } else {
      return item
    }
  })
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {newList.map((item) => {
          return <TodoList key={item.id} item={item}></TodoList>
        })}
      </ul>
    </section>
  )
}

export default TodoMain
